<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>理财产品详情</title>
  <style>
    table {
      overflow-y: auto;
      border-collapse: collapse;
      width: 100%;
      margin-top: 100px;
    }
    .buy-button:hover {
      background-color: #218838;
    }
    .buy-button {
      display: block;
      width: 200px; /* 修改按钮宽度为200px */
      margin: 20px auto;
      padding: 10px 0;
      background-color: #28a745;
      color: white;
      text-align: center;
      text-decoration: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      float: right; /* 添加浮动属性，使按钮靠右对齐 */
    }
    .header {
      position: fixed;
      /* 固定在页面顶部 */
      top: 0;
      /* 对齐到顶部 */
      left: 50%;
      /* 将左边缘移动到页面中间 */
      transform: translateX(-50%);
      /* 将元素水平居中 */
      background-color: #007bff;
      /* 背景颜色 */
      color: white;
      /* 文字颜色 */
      width: 100%;
      /* 宽度 */
      text-align: center;
      /* 文本居中 */
      padding: 1em 0;
      /* 上下内边距 */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      /* 阴影效果 */
      z-index: 1000;
      /* 确保在顶层 */
      display: flex;

    }

    th, td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    th {
      background-color: #f2f2f2;
    }

    /* 模态框样式 */
    .modal {
      display: none; /* 隐藏模态框 */
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }




    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .d-cen1 {
      margin-bottom: 10px;
    }

    .submit {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }

    .submit:hover {
      background-color: #218838;
    }
    .modal-content{
      border-radius: 10px;
    }
    .h-title{
      display: flex;
      justify-content: center;
    }


  </style>
</head>
<body>
<div class="header">
  <i class="fa fa-angle-left fa-2x" onclick="location.href='/financeProduct'"
     style="font-size: 20px;margin-top: 10px;">返回</i>
  <h1 style="margin: auto;">产品详细信息</h1>
  <p style="margin-right: 46.84px;"></p>
</div>
<table>
  <tr>
    <th>产品名称</th>
    <td id="productName" th:text="${session.product.productName}">华夏稳健增长</td>
  </tr>
  <tr>
    <th>产品起始日期</th>
    <td id="beginDate" th:text="${session.product.beginDate}">2024-07-01</td>
  </tr>
  <tr>
    <th>产品终止日期</th>
    <td id="endDate" th:text="${session.product.endDate}">2025-07-01</td>
  </tr>

  <tr th:switch="${session.product.incomeType}">
    <th>收益类型</th>
    <td th:case="1">业绩基准</td>
    <td th:case="2">保本理财</td>
    <td th:case="3">债券</td>
  </tr>

  <tr>
    <th>起购金额</th>
    <td id="beginMoney" th:text="${session.product.beginMoney}">10000元</td>
  </tr>

  <tr th:switch="${session.product.costStatus}">
    <th>销售状态</th>
    <td th:case="1">在售</td>
    <td th:case="2">可售</td>
    <td th:case="3">未售</td>
  </tr>

  <tr th:switch="${session.product.currencyType}">
    <th>币种</th>
    <td th:case="1">人民币</td>
    <td th:case="2">美元</td>
    <td th:case="3">港币</td>
    <td th:case="4">欧元</td>
  </tr>

  <tr th:switch="${session.product.ocType}">
    <th>开封闭类型</th>
    <td th:case="1">封闭</td>
    <td th:case="2">开放</td>
  </tr>

  <tr th:switch="${session.product.riskType}">
    <th>风险等级</th>
    <td th:case="1">低风险</td>
    <td th:case="2">中风险</td>
    <td th:case="3">高风险</td>
  </tr>
  <tr>
    <th>发行机构</th>
    <td id="institution" th:text="${session.product.institution}">华夏基金</td>
  </tr>
  <tr>
    <th>最低年利率</th>
    <td id="lowRate" th:text="${session.product.lowRate}">3%</td>
  </tr>
  <tr>
    <th>最高年利率</th>
    <td id="highRate" th:text="${session.product.highRate}">5%</td>
  </tr>
</table>

    <button class="buy-button" id="button">立即购买</button>



<!-- 模态框 -->
<div id="productModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="h-title">购买理财</h2>
    <form id="purchaseForm" action="/financial/pay" method="post">
      <input type="hidden" name="productId" th:value="${session.product.id}">
      <div class="d-cen1"><label>产品名称：</label><input style="border: none" type="text" name="recName" th:value="${session.product.productName}" readonly></div>
      <div class="d-cen1"><label>交易账户：</label><input style="border: none" type="text" name="recardId" th:value="${session.product.cardId}" readonly></div>
      <div class="d-cen1"><label>起购金额：</label><input style="border: none" type="text" th:value="${session.product.beginMoney}" readonly></div>
      <div class="d-cen1"><label>产品期限：</label><input style="border: none" type="text" th:value="${session.product.timeContinue}" readonly></div>
      <div class="d-cen1"><label>购买金额：</label><input style="border: 1px solid #ccc; /* 设置边框为1像素宽的实线，颜色为灰色 */" type="number" name="money" th:value="${session.product.beginMoney}" required></div>
      <div class="d-cen1">
        <label>选择卡号：</label>
        <select class="form-select" name="cardId" style="width: calc(100% - 20px);">
        <option id="cardId" name="cardId" th:each="card : ${session.cards}" th:if="${card.statusId} == 1" th:value="${card.idNumber}" th:text="${card.idNumber} + '(余额:' + ${card.balance} + ')'" >选择卡号</option>
        </select>
      </div>
      <div class="d-cen1"><label>输入密码：</label><input style="border: 1px solid #ccc; /* 设置边框为1像素宽的实线，颜色为灰色 */" type="password" name="password" required></div>
      <div style="color: red; text-align: center" th:text="${session.msg}"></div>
      <div class="d-cen1"><button type="submit" class="submit">确认购买</button></div>
    </form>
  </div>
</div>


</body>


<script>


  // JavaScript代码
  function showMoreProducts(sectionId) {
    var section = document.getElementById(sectionId);
    var products = section.querySelectorAll('.product');
    for (var i = 0; i < products.length; i++) {
      products[i].style.display = 'block';
    }
    var button = section.querySelector('.more-button');
    button.style.display = 'none';
  }


  // 获取模态框
  var modal = document.getElementById("productModal");


  // 获取按钮
  var btn = document.getElementById("button");

  // 获取 <span> 元素，关闭模态框
  var span = document.getElementsByClassName("close")[0];

  // 点击按钮打开模态框
  btn.onclick = function() {
    modal.style.display = "block";
  }

  // 点击 <span> (x) 关闭模态框
  span.onclick = function() {
    modal.style.display = "none";
  }

  // 点击模态框外部关闭模态框
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  // 处理表单提交
  function handlePurchase(event) {
    event.preventDefault();
    var form = document.getElementById("purchaseForm");
    var purchaseAmount = form.purchaseAmount.value;

    alert("购买金额：" + purchaseAmount);
    // 可以在这里添加进一步的购买处理逻辑，例如发送请求到服务器

    // 关闭模态框
    modal.style.display = "none";
  }
</script>

</html>

